﻿@using Nop.Web.Framework.Web;
@using Nop.Core.Domain;
@using Nop.Core.Infrastructure;
@using Nop.Web.Models.Catalog;
@{
    var isRtl = this.ShouldUseRtlTheme();
 }
    @if (ViewBag.UseKendoUIMenu)
    {
    <text>
    <ul id="site-menu">
        @Html.Raw(ViewBag.MenuItems)
    </ul>
    </text>
    }
    else
    {
    <text>
    <ul class="@ViewBag.MainMenuClass">
        @Html.Raw(ViewBag.MenuItems)
    </ul>  
    <div id="mob-menu-button">
        <a href="">
            <span class="icon"><span class="line"></span><span class="line"></span><span class="line"></span></span>
            <span>&nbsp;</span>
        </a>
    </div>  
    </text>
        if (ViewBag.SupportResponsive)
        {
        <text>
        <ul class="mob-top-menu">
            @Html.Raw(ViewBag.MenuItems)
        </ul>
        </text>
        }
    }

<script>
    @if (ViewBag.UseKendoUIMenu != null && ViewBag.UseKendoUIMenu)
    {
   <text>
    $(document).ready(function () {
        $("#site-menu").kendoMenu();
    });
    </text>
    }
    else
    {
     <text>
    $('li', '.top-menu').on('mouseenter', function () {
        $('a', $(this)).first().addClass('hover');
        if (!$(this).parent().hasClass('top-menu')) {
            var width = $(this).innerWidth();
            $('.sublist', $(this)).first().css('@(isRtl ? "right" : "left")', width + 15);
        }
        $('.sublist', $(this)).first().addClass('active');
        $('.top-menu-triangle', $(this)).addClass('active');
    });

    $('li', '.top-menu').on('mouseleave', function () {
        $('a', $(this)).first().removeClass('hover');
        $('.sublist', $(this)).first().removeClass('active');
        $('.top-menu-triangle', $(this)).removeClass('active');
    });
    </text>
    if (ViewBag.SupportResponsive)
        {
        <text>
        $('a', $('#mob-menu-button')).toggle(function () {
            $('.mob-top-menu').addClass('show');
        },
             function () {
                 $('.mob-top-menu').removeClass('show');
             }
         );

        $(function ($) {
            $('.mob-top-menu .expand').click(function () {
                var parent = $(this).parent();
                if (parent.hasClass('active')) {
                    $(".sublist:first", parent).hide(300);
                    parent.removeClass('active');
                } else {
                    $(".sublist:first", parent).show(300);
                    parent.addClass('active');
                }
            });
        });
        </text>
        }
    }
</script>
